<!-- 菜单 -->
<template>
  <q-page class="q-px-xs q-mt-sm">
    <!-- 查询操作 -->
    <q-toolbar>
      <!-- 查询条件 -->
      <q-input v-model="search" dense placeholder="通过菜单名称查询" debounce="600" style="width: 180px">
        <template #append><q-icon name="search" /></template>
      </q-input>
      <q-space />
      <!-- 操作按钮 -->
      <q-btn icon="plus" color="primary" @click="handleAdd()">新增</q-btn>
      <q-btn icon="delete" color="error" :disabled="!hasSelected" class="q-mx-sm" @click="handleDelete(selected)"> 删除 </q-btn>
      <q-btn icon="excel" color="warning" :loading="exportLoading" @click="handleExport">导出</q-btn>
    </q-toolbar>

    <!-- prettier-ignore -->
    <q-tree-table v-model:ticked="selected" title="菜单目录树" :loading="loading" :columns="columns" tick-strategy="strict" node-key="menuId" label-key="menuName" :nodes="menuOptions" :filter="search" >
      <template #tree="{node}">
        <q-icon v-if="node.icon" :name="node.icon" /> &nbsp;{{ node.menuName }}
      </template>
      <template #cell-action="{ node }">
        <q-btn v-if="node.menuType!=3" flat rounded icon="plus" color="primary" @click.stop="handleAdd(node.menuId, node.menuType)" />
        <q-btn flat rounded icon="edit" color="primary" @click.stop="handleEdit(node.menuId)" />
        <q-btn flat rounded icon="delete" color="error" @click.stop="handleDelete([node.menuId])" />
      </template>
    </q-tree-table>

    <!-- 表单窗口 -->
    <q-dialog v-model="dialog" persistent>
      <menu-form :id="menuId" :parent-id="parentId" :menu-type="munuType" :title="title" @close="closeDialog" @after-save="loadMenuTree" />
    </q-dialog>
  </q-page>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';

  import MenuForm from './MenuForm.vue';
  import { useCrud, useFormDialog, useTable } from 'src/composables';
  import crudApi, { MenuDto, getMenuTree } from 'src/api/system/menu';

  // 定义组件名
  defineOptions({ name: 'Tmenu' });

  const search = ref('');
  const menuOptions = ref<MenuDto[]>([]);
  // 表格选项
  const { tc, loading, selected, hasSelected } = useTable();
  const columns: TableColumn[] = [
    tc('menuPath', '菜单地址', 300, 'left'),
    tc('menuType', '菜单类型', 80, { align: 'center', format: (v) => (v === 1 ? '模块' : v === 2 ? '菜单' : '按钮') }),
    tc('permission', '权限标识', 200, 'center'),
    tc('sortNo', '排序号', 80, 'center'),
    tc('action', '操作', 120, 'center'),
  ];

  // 删除菜单
  const { handleDelete: deleteAction, exportLoading, handleExport } = useCrud(crudApi, {} as PageQuery);
  const handleDelete = (ids: IdType[]) => deleteAction(ids, loadMenuTree);

  // 表单窗口
  const { dialog, title, id: menuId, closeDialog, handleAdd: addAction, handleEdit } = useFormDialog('菜单');
  const parentId = ref<IdType>();
  const munuType = ref<number>(1);
  const handleAdd = (id: IdType = undefined, menuType = 0) => {
    parentId.value = id;
    munuType.value = menuType + 1;
    addAction();
  };

  onMounted(loadMenuTree);
  // 查询菜单树
  function loadMenuTree() {
    loading.value = true;
    getMenuTree().then((data) => {
      menuOptions.value = data;
      selected.value = [];
      loading.value = false;
    });
  }
</script>
src/api/system/menu
